<template>
  <div>
    <el-row type="flex" justify="start" :gutter="40" class="panel-group">

      <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel" @click="queryAssessDay">
          <div class="white card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="day" class-name="card-panel-icon"/>
          </div>

          <div class="card-panel-description">
            <div class="card-panel-text">
              待评定(日)
            </div>
            <count-to :start-val="startVal" :end-val="endValDay1" :duration="1000" class="card-panel-num"/>
            <span class="peoplenum">人次</span>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel" @click="queryAssessedDay">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="day" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              已评定(日)
            </div>
            <count-to :start-val="0" :end-val="endValDay2" :duration="1000" class="card-panel-num"/>
            <span class="peoplenum">人次</span>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-hospital">
            <svg-icon icon-class="ruyuan1" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              新入院(日)
            </div>
            <count-to :start-val="0" :end-val="endNew" :duration="1000" class="card-panel-num"/>
            <span class="peoplenum">人次</span>
          </div>
        </div>
      </el-col>

      <!--    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">  &lt;!&ndash;: 就是 v-bind &ndash;&gt;
            <div class="card-panel" id="card-panel-colnew">
              <div class="icon-people1">
              </div>
              <div class="card-panel-description">
                <div class="card-panel-text">
                </div>
              </div>
            </div>
          </el-col>-->
    </el-row>

    <el-row type="flex" justify="start" :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel" @click="queryAssessWeek">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="week" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              待评定(周)
            </div>
            <count-to :start-val="0" :end-val="endValWeek1" :duration="1000" class="card-panel-num"/>
            <span class="peoplenum">人次</span>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel" @click="queryAssessedWeek">
          <div class="card-panel-icon-wrapper icon-shopping">
            <svg-icon icon-class="week" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              已评定(周)
            </div>
            <count-to :start-val="0" :end-val="endValWeek2" :duration="1000" class="card-panel-num"/>
            <span class="peoplenum">人次</span>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-hospital">
            <svg-icon icon-class="chuyuan1" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              新出院(日)
            </div>
            <count-to :start-val="0" :end-val="endNewChu" :duration="1000" class="card-panel-num"/>
            <span class="peoplenum">人次</span>
          </div>
        </div>
      </el-col>


    </el-row>

  </div>

</template>

<script>
import CountTo from 'vue-count-to'
import {
  listIndex,
  doneListIndex,
  listIndexWeek,
  doneListIndexWeek,
  listIndexNew,
  listIndexNewChu,

  getIndex,
  delIndex,
  addIndex,
  updateIndex
} from "@/api/system/index";

export default {
  name: "Index",
  components: {
    CountTo,
  },
  data() {
    return {
      value: new Date(),
      loading: true,
      startVal: 0,
      endValDay1: 0,
      endValDay2: 0,
      endValWeek1: 0,
      endValWeek2: 0,
      endNew: 0,
      endNewChu: 0,
      dayAssessing: [],
      dayAssessed: [],
      weekAssessing: [],
      weekAssessed: [],
      weekList: [],
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      day: new Date().getDate(),
      time: new Date().getDay(),
      xingqitime: '',
    }
  },
  created() {
    this.getList();
    // this.xingqi();
  },
  methods: {
    //待评估（日）的跳转函数
    queryAssessDay() {
      this.$router.push(
        {
          name: 'indexDetail',
          query:{
            status: '1',
          }
        }
      )
    },
    //已评估（日）的跳转函数
    queryAssessedDay() {
      this.$router.push(
        {
          name: 'indexDetail',
          query:{
            status: '2',
          }
        }
      )
    },
    //待评估（周）的跳转函数
    queryAssessWeek(){
      this.$router.push(
        {
          name: 'indexDetail',
          query:{
            status: '1',
            flag: '1'
          }
        }
      )
    },
    //已评估（周）的跳转函数
    queryAssessedWeek(){
      this.$router.push(
        {
          name: 'indexDetail',
          query:{
            status: '2',
            flag: '1'
          }
        }
      )
    },

    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    },


    /** 查询首页信息列表 */
    getList() {
      this.loading = true;
      // （日）待评定人次
      listIndex().then(response => {
        this.dayAssessing = response.rows;
        let sum = 0;
        if (this.dayAssessing.length > 0) {
          this.dayAssessing.forEach(item => {
            sum += (item.number) * 1;
          });
        }
        this.endValDay1 = sum;
        return
      });
      // （日）已评定人次
      doneListIndex().then(response => {
        this.dayAssessed = response.rows;
        let sum = 0;
        if (this.dayAssessed.length > 0) {
          this.dayAssessed.forEach(item => {
            sum += (item.number) * 1;
          });
        }
        this.endValDay2 = sum;
        return
      });

      // （周）待评估人次
      listIndexWeek().then(response => {
        this.weekAssessing = response.rows;
        let sum = 0;
        if (this.weekAssessing.length > 0) {
          this.weekAssessing.forEach(item => {
            sum += (item.number) * 1;
          });
        }
        this.endValWeek1 = sum;
        return
      });
      // （周）已评估人次
      doneListIndexWeek().then(response => {
        this.weekAssessed = response.rows;
        let sum = 0;
        if (this.weekAssessed.length > 0) {
          this.weekAssessed.forEach(item => {
            console.log(item.number)
            sum += (item.number) * 1;
          });
        }
        this.endValWeek2 = sum;
        return
      });

      // （日）入院患者
      listIndexNew(this.queryParams).then(response => {
        this.indexList = response.rows;
        this.endNew = (response.rows[0].newTime);
        this.total = response.total;
        this.loading = false;
      });
      // （日）出院患者
      listIndexNewChu(this.queryParams).then(response => {
        this.indexList = response.rows;
        this.endNewChu = (response.rows[0].outTimer);
        this.total = response.total;
        this.loading = false;
      });
    },

    xingqi() {
      let day;
      if (this.time == 0) day = "星期日 "
      if (this.time == 1) day = "星期一 "
      if (this.time == 2) day = "星期二 "
      if (this.time == 3) day = "星期三 "
      if (this.time == 4) day = "星期四 "
      if (this.time == 5) day = "星期五 "
      if (this.time == 6) day = "星期六 "
      this.xingqitime = day;
    },
    checkTime(i) {
      if (i < 10) {
        i = "0" + i;
      }
      return i;
    },
    startTime() {
      let today = new Date();//定义日期对象
      let yyyy = today.getFullYear();//通过日期对象的getFullYear()方法返回年
      let MM = today.getMonth() + 1;//通过日期对象的getMonth()方法返回年
      let dd = today.getDate();//通过日期对象的getDate()方法返回年
      let hh = today.getHours();//通过日期对象的getHours方法返回小时
      let mm = today.getMinutes();//通过日期对象的getMinutes方法返回分钟
      let ss = today.getSeconds();//通过日期对象的getSeconds方法返回秒
      // 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09
      MM = this.checkTime(MM);
      dd = this.checkTime(dd);
      mm = this.checkTime(mm);
      ss = this.checkTime(ss);
      let day; //用于保存星期（getDay()方法得到星期编号）
      if (today.getDay() == 0) day = "星期日 "
      if (today.getDay() == 1) day = "星期一 "
      if (today.getDay() == 2) day = "星期二 "
      if (today.getDay() == 3) day = "星期三 "
      if (today.getDay() == 4) day = "星期四 "
      if (today.getDay() == 5) day = "星期五 "
      if (today.getDay() == 6) day = "星期六 "
      document.getElementById('nowDateTimeSpan').innerHTML = yyyy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss + "   " + day;
      setTimeout('startTime()', 1000);//每一秒中重新加载startTime()方法
    },


  }
};
</script>


<style lang="scss" scoped>

//#divtime {
//  width: 400px;
//  height: 50px;
//  border: 1px solid red;
//  position: relative;
//  left: 1100px;
//  top: -100px;
//  color: #2cb7e5;
//}
.icon-people1 {
  background: transparent;
}

#card-panel-colnew {
  cursor: auto;
  background: transparent;
  box-shadow: 0px 0px 0px transparent;
  border-color: transparent;
}

.peoplenum {
  font-size: 16px;
  position: relative;
  top: -1px;
}

.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #3993da;
      }

      .icon-message {
        background: #34bfa3;
      }

      .icon-money {
        background: #3993da;
      }

      .icon-shopping {
        background: #34bfa3
      }

      .icon-hospital {
        background: #e86e4b;
      }
    }

    .icon-people {
      color: #3993da;
    }

    .icon-message {
      color: #34bfa3;
    }

    .icon-money {
      color: #3993da;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .icon-hospital {
      color: #e86e4b;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}

</style>
